<template>
	<view class="content">
    <view class="innerContent">
      <u--form
        labelWidth="120px"
        labelPosition="left"
        :model="modelSwich"
        :rules="rulesSwich"
        ref="uForm"
      >
        <u-form-item
          label="设备名称"
          prop="switchModel.name"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.name"
            placeholder="请输入设备名称"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="设备密钥"
          prop="switchModel.deviceKey"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.deviceKey"
            placeholder="请输入设备密钥"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="设备编号"
          prop="switchModel.deviceNum"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.deviceNum"
            placeholder="请输入设备编号"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="设备类型"
          prop="switchModel.gateway"
          @click="showSexFun"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.gateway"
            placeholder="请选择设备类型"
            disabled
            disabledColor="#ffffff"
            border="none"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
          label="厂商"
          prop="switchModel.factory"
          @click="showfactoryFun"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.factory"
            placeholder="请选择设备厂商"
            disabled
            disabledColor="#ffffff"
            border="none"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
          label="网关"
          v-if="isShowRealGetway"
          @click="showRealGetwayFun"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.realGetway"
            placeholder="请选择设备网关"
            disabled
            disabledColor="#ffffff"
            border="none"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
          label="开关总路数"
          v-if="modelSwich.switchModel.myGetwayId === 2"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.switchCount"
            placeholder="请输入开关总路数"
            @blur="changeSwitchCount"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="开关初始路数"
          v-if="isShowStartNum && modelSwich.switchModel.myGetwayId === 2"
          @click="showSwitchNumFun"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.num"
            placeholder="请选择开关初始路数"
            disabled
            disabledColor="#ffffff"
            border="none"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
          label="备注"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.remark"
            placeholder="请输入备注"
            border="none"
          ></u--input>
        </u-form-item>
        <!-- <u-form-item
          label="状态"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelSwich.switchModel.status"
            placeholder="请输入状态"
            border="none"
          ></u--input>
        </u-form-item> -->
        <view class="lastForSwitch">
          <view @click="submitSwitch">提交</view>
          <view @click="goback">返回上一页</view>
        </view>
      </u--form>
    </view>
    <u-action-sheet
      :show="showSex"
      :actions="deviceTypeArr"
      title="请选择设备类型"
      @close="showSex = false"
      @select="gatewaySelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showfactory"
      :actions="factoryArr"
      title="请选择厂商"
      @close="showfactory = false"
      @select="factorySelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="ShowPopStartNum"
      :actions="startNumArr"
      title="请选择开关初始路数"
      @close="ShowPopStartNum = false"
      @select="startNumSelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="ShowGetway"
      :actions="getwatArr"
      title="请选择网关"
      @close="ShowGetway = false"
      @select="realGetwaySelect"
    >
    </u-action-sheet>
	</view>
</template>

<script>
  import request from '@/request/api';
  import { timestampToDatetime } from '@/untils/index';
	export default {
		data() {
			return {
        isShowRealGetway: false,
        ShowPopStartNum: false,
        isShowStartNum: false,
        tagFactory: '',
        showSex: false,
        showfactory: false,
        ShowGetway: false,
        detailId: '',
        factoryArr: [],
        startNumArr: [],
        getwatArr: [],
        deviceTypeArr: [
          {
            id: 0,
            name: '网关'
          },
          {
            id: 1,
            name: '温湿度'
          },
          {
            id: 2,
            name: '开关'
          },
          {
            id: 3,
            name: '土壤温湿度'
          },
          {
            id: 4,
            name: '秤'
          },
          {
            id: 5,
            name: '氨气'
          }
        ],
        factoryName: '',
        modelSwich: {
          switchModel :{
            name:'',
            deviceKey: '',
            switchCount: '',
            deviceNum: '',
            gateway: '',
            myGetwayId: '',
            factoryID: '',
            factory: '',
            remark:'',
            status: 0,
            realGetway: '',
            realGetwayID: '',
            num: ''
          }
        },
        rulesSwich: {
          'switchModel.name': {
            type: 'string',
            required: true,
            message: '请填写设备名称',
            trigger: ['blur', 'change']
          },
          'switchModel.deviceKey': {
            type: 'string',
            required: true,
            message: '请填写设备密钥',
            trigger: ['blur', 'change']
          },
          'switchModel.deviceNum': {
            type: 'string',
            required: true,
            message: '请填写设备编号',
            trigger: ['blur', 'change']
          },
          // 'switchModel.gateway': {
          //   type: 'string',
          //   required: true,
          //   message: '请选择网关',
          //   trigger: ['blur', 'change']
          // },
          'switchModel.factory': {
            type: 'string',
            required: true,
            message: '请选择厂商',
            trigger: ['blur', 'change']
          }
        },
			}
		},
    filters: {
      setTime(val){
        return timestampToDatetime(val)
      }
		},
		onLoad(e) {
      this.detailId = e.id
      this.factoryID = e.ManId
      this.factoryName = e.name
      
		},
		onShow() {
      this.getDetails()
      this.getManufacturer()
      
    },
		methods: {
      changeSwitchCount(){
        this.modelSwich.switchModel.num = ''
      },
      startNumSelect(e){
        this.modelSwich.switchModel.num = e.name
        
      },
      gatewaySelect(e){
        this.modelSwich.switchModel.gateway = e.name
        this.modelSwich.switchModel.myGetwayId = e.id
        if (this.tagFactory === 1 && this.modelSwich.switchModel.myGetwayId === 2) {
          const switchObj = {
            url: '/device/gatewayList',
            method: 'GET',
            data: {
              fId: this.modelSwich.switchModel.factoryID
            }
          }
          request(switchObj).then(result => {
            if (result.code === '200') {
              this.isShowRealGetway = true
              this.getwatArr = result.data
              this.ShowGetway = true
            } else {
              uni.$u.toast(result.message)
            }
          })
        }
      },
      realGetwaySelect(e){
        // console.log(e);
        
        this.modelSwich.switchModel.realGetway = e.name
        this.modelSwich.switchModel.realGetwayID = e.id
      },
      factorySelect(e){
        this.modelSwich.switchModel.factoryID = e.id
        this.modelSwich.switchModel.factory = e.mName
        this.tagFactory = e.isGateway
        if (this.tagFactory === 1 && this.modelSwich.switchModel.myGetwayId === 2) {
          const switchObj = {
            url: '/device/gatewayList',
            method: 'GET',
            data: {
              fId: this.modelSwich.switchModel.factoryID
            }
          }
          request(switchObj).then(result => {
            if (result.code === '200') {
              this.isShowRealGetway = true
              this.getwatArr = result.data
              this.ShowGetway = true
            } else {
              uni.$u.toast(result.message)
            }
          })
        }
        
      },
      goback(){
        uni.navigateBack()
      },
      submitSwitch(){
        this.$refs.uForm.validate().then(resLgo => {
          // console.log(this.modelSwich.switchModel);
          let obj = {
            url: '/device/update',
            method: 'post',
            data: {
              deviceId: this.detailId,
              deviceType: this.modelSwich.switchModel.myGetwayId,
              deviceKey: this.modelSwich.switchModel.deviceKey,
              switchCount: this.modelSwich.switchModel.switchCount,
              deviceNum: this.modelSwich.switchModel.deviceNum,
              manufacturerId: this.modelSwich.switchModel.factoryID,
              name: this.modelSwich.switchModel.name,
              remark: this.modelSwich.switchModel.remark,
              status: this.modelSwich.switchModel.status,
              gatewayId: this.modelSwich.switchModel.realGetwayID,
              switchNum: this.modelSwich.switchModel.num
            }
          }
          request(obj).then(res => {
            if (res.code === '200') {
              uni.showToast({
                title: '修改成功',
                mask: true
              })      
              uni.navigateBack()
              this.showAddGroup = false
            } else {
              uni.showToast({
                title: res.message,
                mask: true
              })
            }
            
          })
        }).catch(errors => {
          uni.$u.toast('校验失败')
        })
      },
      getManufacturer(){
        const switchObj = {
          url: '/manufacturer/all',
          method: 'GET',
        }
        request(switchObj).then(result => {
          // console.log(result);
          if (result.code === '200') {
            this.factoryArr = result.data
          } else {
            uni.$u.toast(result.message)
          }
        })
      },
      getDetails(){
        let obj = {
          url: '/device/detail',
          method: 'GET',
          data: {
            deviceId: this.detailId
          }
        }
        request(obj).then(res => {
          if (res.code === '200') {
            if (res.data.switchNum != null) {
              this.isShowStartNum = true
            } else {
              this.isShowStartNum = false
            }
            
            if (res.data.gatewayId != null) {
              const switchObj = {
                url: '/device/gatewayList',
                method: 'GET',
                data: {
                  fId: res.data.fId 
                }
              }
              request(switchObj).then(result => {
                if (result.code === '200') {
                  const mylastRes = result.data.find((item) => {
                    return res.data.gatewayId === item.id
                  })
                  this.modelSwich.switchModel.realGetway = mylastRes.name
                  this.isShowRealGetway = true
                } else {
                  uni.$u.toast(result.message)
                }
              })
            }
            this.modelSwich.switchModel = res.data
            this.modelSwich.switchModel.deviceNum = res.data.num
            this.modelSwich.switchModel.factory = this.factoryName
            this.modelSwich.switchModel.factoryID = this.factoryID
            this.modelSwich.switchModel.myGetwayId = res.data.deviceType
            this.modelSwich.switchModel.num = res.data.switchNum
            this.modelSwich.switchModel.gateway = res.data.deviceType === 0 ? '网关' : res.data.deviceType === 1 ? '温湿度' : res.data.deviceType === 2 ? '开关' : res.data.deviceType === 3 ? '土壤温湿度' : '秤'
          } else {
            uni.showToast({
              title: res.message,
              mask: true
            })
          }
        })
      },
      showSwitchNumFun(){
        this.startNumArr = []
        for (let index = 0; index < this.modelSwich.switchModel.switchCount; index++) {
          this.startNumArr.push({
            name: index+1
          })
        }
        if (this.showfactory === true || this.showSex === true || this.ShowGetway === true) {
          this.showfactory = false
          this.showSex = false
          this.ShowGetway = false
        }
        this.ShowPopStartNum = true
      },
      showfactoryFun(){
        if (this.showSex === true || this.ShowPopStartNum === true || this.ShowGetway === true) {
          this.showSex = false
          this.ShowPopStartNum = false
          this.ShowGetway === false
        } 
        this.showfactory = true
      },
      showRealGetwayFun(){
        if (this.showfactory === true || this.showSex === true || this.ShowPopStartNum === true) {
          this.showfactory = false
          this.ShowPopStartNum = false
          this.showSex = false
        }
        this.ShowGetway = true
      },
      showSexFun(){
        if (this.showfactory === true || this.ShowPopStartNum === true || this.ShowGetway === true) {
          this.showfactory = false
          this.ShowPopStartNum = false
          this.ShowGetway = false
        }
        this.showSex = true
      }
		}
	}
</script>

<style lang="scss">
.innerContent {
  width: 92%;
  padding: 30rpx 4% 50rpx 4%;
  height: auto;
}
.lastForSwitch {
  margin-top: 30rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  :nth-child(1) {
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
  :nth-child(2) {
    width: calc(30% - 2rpx);
    height: calc(80rpx - 2rpx);
    line-height: 78rpx;
    text-align: center;
    border-radius: 10rpx;
    border: 1rpx solid #909399;
    color: #000;
  }
}
</style>
